<template>
  <div class="subfield">
    <span class="gengduos"><a href="" target="_blank">更多>></a></span>
    <span class="gengduoss"><a href="" target="_blank">更多>></a></span>
    <el-tabs class="eltabs" v-model="activeName" ref="a" @tab-click="handleClick" >
            <el-tab-pane label="科技创新"  name="first">
                <ul>
                    <li>
                        <span>09-93</span>
                        <a href="" target="_blank">加工所与上海西贝惟达食品科技有限公司签署合作协议</a>
                    </li>
                    <li>
                        <span>09-93</span>
                        <a href="" target="_blank">加工所与上海西贝惟达食品科技有限公司签署合作协议</a>
                    </li>
                    <li>
                        <span>09-93</span>
                        <a href="" target="_blank">加工所与上海西贝惟达食品科技有限公司签署合作协议</a>
                    </li>
                    <li>
                        <span>09-93</span>
                        <a href="" target="_blank">加工所与上海西贝惟达食品科技有限公司签署合作协议</a>
                    </li>
                    <li>
                        <span>09-93</span>
                        <a href="" target="_blank">加工所与上海西贝惟达食品科技有限公司签署合作协议</a>
                    </li> 
                    <li>
                        <span>09-93</span>
                        <a href="" target="_blank">加工所与上海西贝惟达食品科技有限公司签署合作协议</a>
                    </li>
                    <li>
                        <span>09-93</span>
                        <a href="" target="_blank">加工所与上海西贝惟达食品科技有限公司签署合作协议</a>
                    </li>
                </ul>
            </el-tab-pane>
        <el-tab-pane label="成功转化" >
            <ul>
                <li>
                    <span>09-93</span>
                    <a href="" target="_blank">加工所与临朐县政府签署战略合作协议</a>
                </li>
                <li>
                    <span>09-93</span>
                    <a href="" target="_blank">加工所与临朐县政府签署战略合作协议</a>
                </li>
                <li>
                    <span>09-93</span>
                    <a href="" target="_blank">加工所与临朐县政府签署战略合作协议</a>
                </li>
                <li>
                    <span>09-93</span>
                    <a href="" target="_blank">加工所与临朐县政府签署战略合作协议</a>
                </li>
                <li>
                    <span>09-93</span>
                    <a href="" target="_blank">加工所与临朐县政府签署战略合作协议</a>
                </li>
                <li>
                    <span>09-93</span>
                    <a href="" target="_blank">加工所与临朐县政府签署战略合作协议</a>
                </li>
                <li>
                    <span>09-93</span>
                    <a href="" target="_blank">加工所与临朐县政府签署战略合作协议</a>
                </li>
            </ul>
        </el-tab-pane>
        <el-tab-pane label="国际合作" >
            <ul>
                <li>
                    <span>09-93</span>
                    <a href="" target="_blank">非洲科学院达科拉院长一行到访加工所</a>
                </li>
                <li>
                    <span>09-93</span>
                    <a href="" target="_blank">非洲科学院达科拉院长一行到访加工所</a>
                </li>
                <li>
                    <span>09-93</span>
                    <a href="" target="_blank">非洲科学院达科拉院长一行到访加工所</a>
                </li>
                <li>
                    <span>09-93</span>
                    <a href="" target="_blank">非洲科学院达科拉院长一行到访加工所</a>
                </li>
                <li>
                    <span>09-93</span>
                    <a href="" target="_blank">非洲科学院达科拉院长一行到访加工所</a>
                </li>
                <li>
                    <span>09-93</span>
                    <a href="" target="_blank">非洲科学院达科拉院长一行到访加工所</a>
                </li>
                <li>
                    <span>09-93</span>
                    <a href="" target="_blank"a>非洲科学院达科拉院长一行到访加工所</a>
                </li>
            </ul>
        </el-tab-pane>
        <el-tab-pane label="媒体报道" >
            <ul>
                <li>
                    <span>09-93</span>
                    <a href="" target="_blank">【农民日报】第五届“农科开放日”加工所专场展示加工科技成果</a>
                </li>
                <li>
                    <span>09-93</span>
                    <a href="" target="_blank">【农民日报】第五届“农科开放日”加工所专场展示加工科技成果</a>
                </li>
                <li>
                    <span>09-93</span>
                    <a href="" target="_blank">【农民日报】第五届“农科开放日”加工所专场展示加工科技成果</a>
                </li>
                <li>
                    <span>09-93</span>
                    <a href="" target="_blank">【农民日报】第五届“农科开放日”加工所专场展示加工科技成果</a>
                </li>
                <li>
                    <span>09-93</span>
                    <a href="" target="_blank">【农民日报】第五届“农科开放日”加工所专场展示加工科技成果</a>
                </li>
                <li>
                    <span>09-93</span>
                    <a href="" target="_blank">【农民日报】第五届“农科开放日”加工所专场展示加工科技成果</a>
                </li>
                <li>
                    <span>09-93</span>
                    <a href="" target="_blank">【农民日报】第五届“农科开放日”加工所专场展示加工科技成果</a>
                </li>
            </ul>
        </el-tab-pane>
      </el-tabs>
      <div class="sub_right">
        <el-tabs class="eltabss"  v-model="activeNames" ref="a" @tab-click="handleClick" >
            <el-tab-pane label="通知公告"  name="first" >
                <ul>
                    <li>
                        <span class="datas">
                            <i>04月</i>
                            <strong>08日</strong>
                        </span>
                        <a href="" class="lianjie" target="_blank">中国农业科学院农产品加工研究生2023年统招博士研究生拟录名单补充公示</a>
                    </li>
                    <li>
                        <span class="datas">
                            <i>04月</i>
                            <strong>08日</strong>
                        </span>
                        <a href="" class="lianjie" target="_blank">中国农业科学院农产品加工研究生2023年统招博士研究生拟录名单补充公示</a>
                    </li>
                    <li>
                        <span class="datas">
                            <i>04月</i>
                            <strong>08日</strong>
                        </span>
                        <a href="" class="lianjie" target="_blank">中国农业科学院农产品加工研究生2023年统招博士研究生拟录名单补充公示</a>
                    </li>
                    <li>
                        <span class="datas">
                            <i>04月</i>
                            <strong>08日</strong>
                        </span>
                        <a href="" class="lianjie" target="_blank">中国农业科学院农产品加工研究生2023年统招博士研究生拟录名单补充公示</a>
                    </li>
                </ul>
            </el-tab-pane>
        <el-tab-pane label="招聘信息" >
            <ul>
                <li>
                    <span class="datas">
                        <i>04月</i>
                        <strong>08日</strong>
                    </span>
                    <a href="" class="lianjie" target="_blank">双轮驱动推创新  三链融合兴产业</a>
                </li>
                <li>
                    <span class="datas">
                        <i>04月</i>
                        <strong>08日</strong>
                    </span>
                    <a href="" class="lianjie" target="_blank">双轮驱动推创新  三链融合兴产业</a>
                </li>
                <li>
                    <span class="datas">
                        <i>04月</i>
                        <strong>08日</strong>
                    </span>
                    <a href="" class="lianjie" target="_blank">双轮驱动推创新  三链融合兴产业</a>
                </li>
                <li>
                    <span class="datas">
                        <i>04月</i>
                        <strong>08日</strong>
                    </span>
                    <a href="" class="lianjie" target="_blank">双轮驱动推创新  三链融合兴产业</a>
                </li>
            </ul>
        </el-tab-pane>
        <el-tab-pane label="调研报告" >
            <ul>
                <li>
                    <span class="datas">
                        <i>04月</i>
                        <strong>08日</strong>
                    </span>
                    <a href="" class="lianjie" target="_blank">青海省共和县科技帮扶调研报告</a>
                </li>
                <li>
                    <span class="datas">
                        <i>04月</i>
                        <strong>08日</strong>
                    </span>
                    <a href="" class="lianjie" target="_blank">青海省共和县科技帮扶调研报告</a>
                </li>
                <li>
                    <span class="datas">
                        <i>04月</i>
                        <strong>08日</strong>
                    </span>
                    <a href="" class="lianjie" target="_blank">青海省共和县科技帮扶调研报告</a>
                </li>
                <li>
                    <span class="datas">
                        <i>04月</i>
                        <strong>08日</strong>
                    </span>
                    <a href="" class="lianjie" target="_blank">青海省共和县科技帮扶调研报告</a>
                </li>
            </ul>
        </el-tab-pane>
        <el-tab-pane label="公开公示" >
            <ul>
                <li>
                    <span class="datas">
                        <i>04月</i>
                        <strong>08日</strong>
                    </span>
                    <a href="" class="lianjie" target="_blank">加工所工作简报2022年第10期</a>
                </li>
                <li>
                    <span class="datas">
                        <i>04月</i>
                        <strong>08日</strong>
                    </span>
                    <a href="" class="lianjie" target="_blank">加工所工作简报2022年第10期</a>
                </li>
                <li>
                    <span class="datas">
                        <i>04月</i>
                        <strong>08日</strong>
                    </span>
                    <a href="" class="lianjie" target="_blank">加工所工作简报2022年第10期</a>
                </li>
                <li>
                    <span class="datas">
                        <i>04月</i>
                        <strong>08日</strong>
                    </span>
                    <a href="" class="lianjie" target="_blank">加工所工作简报2022年第10期</a>
                </li>
            </ul>
        </el-tab-pane>
      </el-tabs>
      </div>
  </div>
  </template>
  <script>
    export default {
      data() {
        return {
          activeName: 'first',
          activeNames: 'first'
        };
      },
      methods: {
        handleClick(tab, event) {
          console.log(tab, event);
        },
        handleClicks(tab, event) {
          console.log(tab, event);
        },
      },
    //   mounted(){
    //     this.$nextTick(()=>{this.$refs.a.$refs.nav.$nextTick(()=>{
    //         var target=document.getElementsByClassName("el-tabs_item is-top");
    //         console.log(target);
    //         let that=this;
    //         for(let i=0;i<target.length;i++){
    //             target[i].addEventListener("mouseover",()=>{
    //                 that.$refs.a.handleTabClick(1,String(i))
    //             })
    //         }
    //     })})
    //   }
    };
  </script>
  <style scoped>
  .eltabs li{
    list-style: none;
    float: left;
    width: 100%;
    height: 36px;
    line-height: 36px;
    overflow: hidden;
    background: url(../image/sanjiao.png) no-repeat left 13px;
  }
  .eltabs li span{
    float: right;
    margin-left: 10px;
}
    .eltabs li a{
        color: #000;
        list-style: none;
        text-decoration: none;
        display: block;
        padding-left: 18px;
    }
  .subfield .gengduos{
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 999;
  }
  .subfield .gengduoss{
    position: absolute;
    left: 540px;
    top: 10px;
    z-index: 999;
  }
  .subfield .gengduoss a{
    color: #000;
    list-style: none;
    text-decoration: none;
  }
  .subfield .gengduos a{
    color: #000;
    list-style: none;
    text-decoration: none;
  }
  .eltabss ul{
    list-style: none;
  }
  .eltabss ul li{
    height: 52px;
    margin: 0px 0 14px;
    width: 100%;
    overflow: hidden;
  }
  .datas{
    background-color: #16a05d;
    height: 52px;
    width: 60px;
    display: block;
    float: left;
    margin-right: 15px;
  }
  .lianjie{
    color:#000;
    text-decoration: none;
    list-style: none;
  }
  .eltabss ul li .datas i {
    display: block;
    font-size: 14px;
    padding-top: 3px;
    height: 20px;
    text-align: center;
    font-style: normal;
    color:#fff;
  }
  .eltabss ul li .datas strong {
    display: block;
    font-size: 18px;
    padding-bottom: 2px;
    height: 32px;
    color: #fff;
    text-align: center;
    font-weight: normal;
    line-height: 32px;
}
 /deep/ .el-tabs__item {
    font-weight: bold; /*设置标签文本加粗*/
    font-size: 20px;
  }
  /deep/ .el-tabs__item:hover {
    font-weight: bold; /*设置标签文本加粗*/
    font-size: 20px;
    color:  #069564;
  }
  /deep/.el-tabs__item.is-active{
    color:  #069564;
  }
  /deep/.el-tabs__active-bar{
    background:#069564 ;
  }
  .subfield{
    position: relative;
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
  }
  .eltabs{
    width: 50%;
    height: 313px;
    float: left;
  }
  .eltabss{
    height: 313px;
  }
  .sub_right{
    width: 48%;
    float: right;
    height: 313px;
  }
</style>